<template>
  <div class="category-reduce-score">
    <div v-for="(category, index) in categoryList" :key="'category' + index" class="category-item">
      <el-input :disabled="point.result === -1" placeholder="请输入类别名称" v-model="category.name" class="category-name" @change="badTotalChange(category)">
        <template slot="prepend">类别 {{ index + 1 }}:</template>
      </el-input>
      <el-input :disabled="point.result === -1" placeholder="请输入数量" v-model.number="category.badTotal" class="category-count" @change="badTotalChange(category)">
        <template slot="prepend">违反:</template>
        <template slot="append">{{ point.ruleUnit || '处' }}</template>
      </el-input>
      <span class="operate-btn">
        <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="add(index)" />
        <el-button v-if="index != 0" type="danger" icon="el-icon-minus" circle size="mini" @click="remove(index)" />
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CategoryReduceScore',
  props: {
    point: {
      type: Object,
      default: () => {}
    }
  }, // 分类扣分
  data() {
    return {
      categoryList: []
    }
  },
  watch: {
    point () {
      this.init()
    }
  },
  created() { // 初始化
    this.init()
  },
  mounted() {
  },
  methods: {
    init () {
      if (this.point.typeJson) {
        try {
          this.categoryList = JSON.parse(this.point.typeJson)
        } catch (e) {
          console.log(e)
        }
        if (!(this.categoryList instanceof Array) || this.categoryList.length === 0) {
          this.categoryList = [{
            name: '',
            badTotal: null
          }]
        }
      } else {
        this.categoryList = [{
          name: '',
          badTotal: null
        }]
      }
    },
    badTotalChange(category) {
      if (category.badTotal && !Number(category.badTotal)) {
        this.$message.error('数量请输入数字！')
        category.badTotal = null
        return
      }
      if (category.badTotal < 0 || category.badTotal > 999) {
        this.$message.error('请输入在 0 ~ 999范围内数量！')
        category.badTotal = null
        return
      }
      if (category.badTotal < 1 && category.badTotal > 0) {
        category.badTotal = parseInt(category.badTotal)
      }
      let validTotal = 0
      for (let i = 0; i < this.categoryList.length; i++) {
        if (this.categoryList[i].name) {
          validTotal += 1
        }
      }
      const event = { categoryList: this.categoryList, validTotal }
      this.$emit('getCategoryData', event)
    },
    remove(index) {
      this.categoryList.splice(index, 1)
    },
    add(index) {
      this.categoryList.splice(index + 1, 0, {
        name: '',
        badTotal: null
      })
    }
  }
}
</script>

<style scoped lang='scss'>
 .category-reduce-score {
   .category-item {
     margin-bottom: 10px;
   }
   .category-name {
     width: 340px;
   }
   .category-count {
     width: 240px;
     margin-left: 20px;
   }
   .operate-btn {
     margin-left: 20px;
   }
 }
</style>
